<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/at.css">
    <link rel="stylesheet" href="../css/fangdajing.css">
</head>

<body>
    <div id="top">
        <div class="banxin">
            <div class="l">
                <div class="tm">
                    <span class="iconfont icon-shouye"><a href="#">天猫首页</a></span>
                    <span>喵，欢迎来天猫</span>
                    <span><a href="02dengluye.html">请登录</a></span>
                    <span><a href="03zhuceye.html">免费注册</a></span>
                </div>
            </div>
            <div class="r">
                <ul class="taobao">
                    <li>
                        <a href="#">我的淘宝</a>
                        <span class="iconfont icon-arrow-down
                        "></span>
                        <ul>
                            <li>已买到的宝贝</li>
                            <li>已卖出的宝贝</li>
                        </ul>
                    </li>
                    <li>
                        <span class="iconfont icon-gouwuche
                        "></span>
                        <a href="#">购物车</a>
                    </li>
                    <li>
                        <a href="#">收藏夹</a>
                        <span class="iconfont icon-arrow-down
                        "></span>&nbsp;&nbsp;&nbsp;<span>|</span>
                        <ul>
                            <li>收藏的宝贝</li>
                            <li>收藏的店铺</li>
                        </ul>

                    </li>
                    <li>
                        <span class="iconfont icon-shouji
                        "></span>
                        <a href="#">手机版</a>
                        <ul>
                            <li><img src="../images/ewm.png" alt=""></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">淘宝网</a>
                    </li>

                    <li>
                        <a href="#">商家支持</a>
                        <span class="iconfont icon-arrow-down
                        "></span>
                        <ul>
                            <li><b>商家：</b></li>
                            <li><a href="#">商家中心</a></li>
                            <li><a href="#">商家入驻</a></li>
                            <li><a href="#">商家品控</a></li>
                            <li><a href="#">天猫智库</a></li>
                            <li><a href="#"><b>帮助：</b></a></li>
                            <li><a href="#">商家服务大厅</a></li>
                            <li><a href="#"></a>问商家</li><br>
                        </ul>
                    </li>

                    <li>
                        <span class="iconfont icon-daohang
                        "></span>
                        <a href="#">网站导航</a>
                        <span class="iconfont icon-arrow-down
                        "></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- --------------第二栏  搜索------------------------------------- -->
    <div id="sousuo">
        <div class="banxin">
            <div class="zuo">
                <div class="t">
                    <!-- 图片 -->
                    <div class="tp">
                        <img src="../images/tm.png">
                    </div>
                    <!-- 客服 -->
                    <div class="kf">
                        <b>安踏官方网站</b><br>
                        <img src="../images/kf.png" alt="">
                    </div>
                    <div class="wuliu">
                        <p>描述服务物流</p>
                        <p>4.8-4.8-4.8<span class="iconfont icon-jiantou1"></span></p>
                        <div class="wjiantou"><span class="iconfont icon-arrow-down
                        "></span></div>
                    </div>
                    <!-- 二维码 -->
                    <div class="erweima">
                        <p>手机逛</p>
                        <span class="iconfont icon-erweima
                        "></span>
                        <span class="iconfont icon-arrow-down
                        "></span>
                        <div class="ewm"></div>
                    </div>
                </div>
            </div>
            <div class="you">
                <input type="text" id="ssk" placeholder="  搜索 天猫 商品/品牌/店铺">
                <div class="stm"><a href="#">搜天猫</a></div>
                <div class="sbd"><a href="#">搜本店</a></div>
            </div>
        </div>
    </div>

    <div id="anta">
        <div class="banxin">
            <div class="logo"><a href="#"><img src="../images/logo_03.jpg" alt=""></a></div>
            <!-- 搜索框 -->
            <div class="suk">
                <input type="text" id="oIp">
                <a href="#">
                    <span class="iconfont icon-fangdajing"></span>
                </a>
            </div>
        </div>
    </div>
    <!--  导航栏  -->
    <div id="dhl">
        <div class="banxin">
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">所有分类</a></li>
                    <li>
                        <a href="#">男子系列</a>
                        <ul>
                            <li>
                                <a href="#">鞋类</a>
                            </li>
                            <li><a href="#">跑步鞋</a></li>
                            <li><a href="#">板鞋</a></li>
                            <li><a href="#">篮球鞋</a></li>
                            <li><a href="#">凉鞋</a></li>
                            <li><a href="#">拖鞋</a></li>
                            <li><a href="#">KT</a></li>
                            <li><a href="#">炙热</a></li>
                            <li><a href="#">霸道</a></li>
                        </ul>

                    <li>
                        <a href="#">女子系列</a>
                        <ul>
                            <li><a href="#">服装</a></li>
                            <li><a href="#">T恤</a></li>
                            <li><a href="#">卫衣</a></li>
                            <li><a href="#">运动套装</a></li>
                            <li><a href="#">运动长裤</a></li>
                            <li><a href="#">运动套装</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">儿童系列</a>
                        <ul>
                            <li><a href="#">跑鞋/休闲鞋</a></li>
                            <li><a href="#">篮球鞋</a></li>
                            <li><a href="#">T恤</a></li>
                            <li><a href="#">裤子</a></li>
                            <li><a href="#">凉鞋</a></li>
                            <li><a href="#">拖鞋</a></li>
                            <li><a href="#">KT</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">ANTA科技</a>
                    </li>
                    <li>
                        <a href="#">东奥国旗系列</a>
                        <ul>
                            <li><a href="#"><img src="../images/dah.png" alt=""></a></li>
                        </ul>
                    </li>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 放大镜 -->
    <div id="fangdajing">
        <div class="banxin">
            <div id="box">
                <div id="smallbox">
                    <img src="../images/ja5.png" alt="">
                    <div id="mask"></div>
                </div>
                <div id="bigbox">
                    <img src="../images/ja5.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
     let that;
    class Enlarge {
        constructor(ele) {
            this.ele = ele;
            this.small = this.ele.children[0]
            this.big = this.ele.children[1]
            this.mask = this.small.children[1]
            this.bigimg = this.big.children[0]
            that = this;
            this.bindEvents();
        }
        bindEvents() {
            // 1. 鼠标移入
            this.ele.onmouseover = this.over;
            // 2. 鼠标移出
            this.ele.onmouseout = this.out;
            // 3. 鼠标移动
            this.ele.onmousemove = this.move;
        }
        over() {
            that.mask.style.display = 'block'
            that.big.style.display = 'block'
        }
        out() {
            that.mask.style.display = 'none'
            that.big.style.display = 'none'
        }
        move(e) {
            let ev = e || event;
            //   3.1 鼠标位置
            let x = ev.clientX - that.mask.offsetWidth / 2;
            let y = ev.clientY - that.mask.offsetHeight / 2;
            //   3.2 遮罩跟随
            //   3.3 边界限制  x最小值0   x最大值（box.clientWidth-mask.offsetWidth）

            if (x <= 0) {
                x = 0;
            }
            if (x >= that.ele.clientWidth - that.mask.offsetWidth) {
                x = that.ele.clientWidth - that.mask.offsetWidth
            }

            if (y <= 0) {
                y = 0;
            }
            if (y >= that.ele.clientHeight - that.mask.offsetHeight) {
                y = that.ele.clientHeight - that.mask.offsetHeight;
            }
            //bigx
            //图片可以运动的最大距离/遮罩运动的最大距离=图片移动的位置/遮罩的左偏移量
            let bilix = (that.bigimg.offsetWidth - that.big.clientWidth) / (that.small.clientWidth - that.mask.offsetWidth);
            let biliy = (that.bigimg.offsetHeight - that.big.clientHeight) / (that.small.clientHeight - that.mask.offsetHeight);


            let bigx = bilix * that.mask.offsetLeft;
            let bigy = biliy * that.mask.offsetTop;

            that.bigimg.style.left = - bigx + 'px'
            that.bigimg.style.top = - bigy + 'px'

            //   3.4 设置给遮罩的left和top
            that.mask.style.left = x + 'px'
            that.mask.style.top = y + 'px'
        }
    }
    let box = document.querySelector('#box');
    new Enlarge(box);
</script>